<template>
  <div v-if="visible" class="modal-overlay" @click.self="close">
    <div class="modal card">
      <header class="modal__header">
        <h3>{{ title }}</h3>
        <button class="modal__close" @click="close">×</button>
      </header>
      <p class="modal__message">{{ message }}</p>
      <div class="modal__actions">
        <button class="btn btn--primary" @click="confirm">{{ confirmText }}</button>
        <button class="btn btn--ghost" @click="close">稍后处理</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
  result: {
    type: Object,
    default: null
  }
});

const emit = defineEmits(["close", "confirm"]);

const visible = computed(() => Boolean(props.result));
const action = computed(() => props.result?.action || "");
const title = computed(() => {
  if (action.value === "need_bind_phone") return "绑定手机号";
  if (action.value === "need_verify_identity") return "完善企业认证";
  return "下一步操作";
});
const message = computed(() => props.result?.message || "请继续完成后续流程。");
const confirmText = computed(() => {
  if (action.value === "need_bind_phone") return "立即绑定";
  if (action.value === "need_verify_identity") return "前往认证";
  return "立即处理";
});

const close = () => emit("close");
const confirm = () => emit("confirm", action.value);
</script>

<style scoped lang="scss">
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 2100;
}

.modal {
  max-width: 420px;
  width: 100%;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;

  h3 {
    margin: 0;
  }
}

.modal__close {
  border: none;
  background: none;
  font-size: 24px;
  color: var(--gray-500);
}

.modal__message {
  margin: 0;
  color: var(--gray-600);
  line-height: 1.6;
}

.modal__actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.btn {
  border-radius: 10px;
  padding: 10px 20px;
  border: none;
  font-weight: 600;

  &--primary {
    background: var(--primary-color);
    color: #fff;
  }

  &--ghost {
    background: var(--gray-100);
    color: var(--gray-700);
  }
}
</style>
